﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserShow</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="~/Administrator/UserShow/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/font-awesome.css" rel="stylesheet" />

    <!-- Data Tables -->
    <link href="~/Administrator/UserShow/css/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/animate.css" rel="stylesheet" />
    <link href="~/Administrator/UserShow/css/style.css" rel="stylesheet" />

</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>房屋信息浏览 <small>查找，删除,更改</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table id="HousesTable" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th>房屋信息编号</th>
                                    <th>客户姓名</th>
                                    <th>联系电话</th>
                                    <th>房屋类型</th>
                                    <th>房屋种类</th>
                                    <th>金额</th>
                                    <th>户型</th>
                                    <th>建筑面积</th>
                                    <th>装修情况</th>
                                    <th>房屋地址</th>
                                    <th>房屋情况</th>
                                    <th>房屋状态</th>
                                    <th>添加时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="~/Administrator/UserShow/js/jquery.min.js"></script>
    <script src="~/Administrator/UserShow/js/bootstrap.min.js"></script>


    <script src="~/Administrator/UserShow/js/jquery.jeditable.js"></script>

    <!-- Data Tables -->
    <script src="~/Administrator/UserShow/js/jquery.dataTables.js"></script>
    <script src="~/Administrator/UserShow/js/dataTables.bootstrap.js"></script>

    <!-- 自定义js -->
    <script src="~/Administrator/UserShow/js/content.js"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(function () {
            $.getJSON("../api/Houses", LoadUsers)
        })
        function LoadUsers(data) {
            console.log(data)
            $("#HousesTable").find("tr:gt(0)").remove();
            $.each(data, function (key, val) {
                var row = `<tr class="gradeX">
                                            <td>${val.ID}</td>
                                            <td>
                                                ${val.Name}
                                            </td>
                                            <td>
                                                ${val.Telephone}
                                            </td>
                                            <td>
                                                ${val.Information}
                                            </td>
                                            <td>
                                                ${val.Type}
                                            </td>
                                            <td>
                                                ${val.Monthly}
                                            </td>
                                            <td>
                                                ${val.Houses}
                                            </td>
                                             <td>
                                                ${val.Area}
                                            </td>
                                             <td>
                                                ${val.Renovation}
                                            </td>
                                            <td>
                                                ${val.Address}
                                            </td>
                                             <td>
                                                ${val.Situation}
                                            </td>
                                            <td>${val.HBan}</td>
                                            <td class="center">${val.HTime}</td>
                                            <td class="center">
                                                <a href="javascript:" onclick="Remove(${val.ID})">删除</a>
                                                <a href="javascript:" onclick="Update(${val.ID})">更改</a>
                                            </td>
                                        </tr>`;
                $("#HousesTable").append(row);
            })
        }
        function Remove(id) {
            if (confirm('你确定要删除吗？')) {
                $.ajax({
                    url: '../api/Houses/' + id,
                    type: 'delete',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        $.getJSON("../api/Houses", LoadUsers)
                    }
                })
            }
        }
        function Update(id) {
            if (confirm('你确定要更改吗？')) {
                $.ajax({
                    url: '../api/Houses/' + id,
                    type: 'delete',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        $.getJSON("../api/Houses", LoadUsers)
                    }
                })
            }
        }
    </script>
</body>
</html>
